<template>
  <div class="mine">
  	<Header cname="header"
			  		:back=true
			  		@onBack="onBack"
			      @onSearch="onSearch" 
			      @onMenu="onMenu">
			      	<h1>个人中心</h1>
			    	</Header>
  	<TabPanel />
  	<!-- Header end -->
  	<!-- TabPanel end -->
		<div class="mine-content">
			<div class="mine-info">
				<img class="mine-icon" src="../../assets/logo.png" alt="">
				<p class="mine-name">未登录</p>
			</div>
			<!-- mine-info end -->
			<ul class="mine-tab">
				<li class="mine-tab-item" @click="tapReadRecords">
					<p>阅读记录</p>
					<p v-if="readRecords">{{readRecords.length}}</p>
					<p v-else>暂无</p>
				</li>
				<li class="mine-tab-item" @click="tapCollectRecords">
					<p>我的收藏</p>
					<p v-if="collectRecords">{{collectRecords.length}}</p>
					<p v-else>暂无</p>
				</li>
				<li class="mine-tab-item" @click="tapSayRecords">
					<p>我的评论</p>
					<p>暂无</p>
				</li>
			</ul>
			<!-- mine-more end -->
			<ul class="mine-more">
				<li class="mine-more-item">充值中心</li>
				<li class="mine-more-item">兑换中心</li>
				<li class="mine-more-item">我的设置</li>
				<li class="mine-more-item">联系客服</li>
			</ul>
			<!-- mine-more end -->
			<div class="login-or-logout" @click="onLoginOrLogOut">{{isLogin?"退出":"马上登录"}}</div>
		</div>
  </div>
</template>

<script>
import {Mixin} from '../../utils/mixin.js'
import Header from '../../components/common/Header.vue'
import TabPanel from '../../components/common/TabPanel.vue'
export default {
	mixins: [Mixin],
	components: {
		Header,
		TabPanel
	},
	data() {
		return {
			isLogin: false,
		}
	},
	created() {
		// 拦截 token 获取自己的信息
		
	},
	methods: {
		// 点击阅读记录
		tapReadRecords() {
			console.log('点击阅读记录')
		},

		// 点击收藏记录
		tapCollectRecords() {
			console.log('点击收藏记录')
		},

		// 点击评论记录
		tapSayRecords() {
			console.log('点击评论记录')
		},

		onLoginOrLogOut() {
			!this.isLogin?console.log('点击登录'):console.log('退出')
		}
 	}
}
</script>
<style scoped lang="scss">
@import '../../assets/style/color.scss';
@import '../../assets/style/mixin.scss';
.mine {
	.header {
	  background-color: $color-bg-f;
	  h1 {
			font-size: $font-size-18;
			font-weight: 600;
			color: $color-text-5;
	  }
	}
	.mine-content {
		width: 100%;
		margin-top: 50px;
		@include center;
		flex-direction: column;
		.mine-info {
			width: 100%;
			height: 150px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			color: $color-text-7;
			box-sizing: border-box;
			.mine-icon {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}
		.mine-tab {
			width: 100%;
			padding: 10px;
			@include center;
			flex-direction: row;
			background-color: $color-bg-f;
			.mine-tab-item {
				flex:1;
				@include center;
				flex-direction: column;
			}
		}
		.mine-more {
			width: 100%;
			background-color: $color-bg-f;
			color: $color-text-5;
			margin-top: 5px;
			.mine-more-item {
				line-height: 40px;
				padding-left: 12px;
				border-bottom: 1px solid $color-bg;
			}
		}
		.login-or-logout {
			width: 96%;
			margin: 10px auto;
			line-height: 40px;
			text-align: center;
			background-color: $color-bg-fa;
			color: $color-text-f;
			font-size: $font-size-16;
		}
	}
}
</style>